<template>
  <div class="fenlei">
    <!-- 标题 -->
    <h3 class="title">陈晓钰</h3>
    <!-- 搜索 -->
    <div class="search">
      <div class="search-item">
        <van-icon name="search" class="search-icon">
          <span class="search-text">搜索</span>
        </van-icon>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
        <div class="main-left">
            <SlideBar @emitData="getData"></SlideBar>
        </div>
        <div class="main-right">
            <goods-list :fenleiList="fenleiList"></goods-list>
        </div>
    </div>
  </div>
</template>

<script>
import SlideBar from "../components/Fenlei/SlideBar.vue"

import GoodsList from "../components/Fenlei/GoodsList.vue"

export default {
  name: "Fenlei",
 components:{
      SlideBar,
      GoodsList
  },
  data(){
    return{
      fenleiList:[]
    }
  },
methods:{
  getData(v){
    this.fenleiList=v.children
    console.log(v)
  }
}

}
</script>

<style scoped  lang="less">
.title{width: 100vw;height: 50px;background: #eb4450;color:#fff;text-align: center;line-height: 50px;}

.search{
    background: #EB4450;
    height: 40px;
    width: 100vw;
    padding: 10px 0 0;
        .search-item{
            width: 90vw;
            margin: 0px auto;
            height: 30px;
            background: white;
            text-align: center;
            color: gray;
            line-height: 30px;
            border-radius: 3px;
        .search-icon{

            }
        .search-text{

            }
 }
 
 }
 .main{
     height: calc(100vh - 100px);width: 100vw;display: flex;
     .main-left{
         width: 100px;height: 100%;
     }
     .main-right{
         flex: 1;height: 100%;
     }
 }
</style>
